import Vue from 'vue'
import Router from 'vue-router'
import Slot from './views/Slot.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    // slot
    {
      path: '/',
      name: 'Slot',
      component: Slot
    },
    // 计算属性 侦听器 方法
    {
      path: '/computed',
      name: 'Computed',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "computed" */ './views/Computed.vue'),
      children: [
        {
          path: '/aCom',
          name: 'ACom',
          component: () => import(/* webpackChunkName: "computed" */ './components/ACom.vue')
        },
        {
          path: '/bCom',
          name: 'BCom',
          component: () => import(/* webpackChunkName: "computed" */ './components/BCom.vue')
        },
        {
          path: '/cCom',
          name: 'CCom',
          component: () => import(/* webpackChunkName: "computed" */ './components/CCom.vue')
        }
      ]
    },
    // $set
    {
      path: '/setCom',
      name: 'SetCom',
      component: () => import(/* webpackChunkName: "setCom" */ './views/SetCom.vue')
    },
    // 生命周期
    {
      path: '/lifeCycle',
      name: 'LifeCycle',
      component: () => import(/* webpackChunkName: "lifeCycle" */ './views/LifeCycle.vue')
    },
    // sync
    {
      path: '/sync',
      name: 'Sync',
      component: () => import(/* webpackChunkName: "syncCom" */ './views/SyncCom.vue')
    },
    // parent
    {
      path: '/parent',
      name: 'Parent',
      component: () => import(/* webpackChunkName: "parent" */ './views/Parent.vue')
    },
    {
      path: '/directive',
      name: 'Directive',
      component: () => import(/* webpackChunkName: "directive" */ './views/Directive.vue')
    },
    {
      path: '/mimin',
      name: 'Mimin',
      component: () => import(/* webpackChunkName: "mimin" */ './views/Mimin.vue')
    }
  ]
})
